import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Modal, message, Button, Spin } from "antd";
import { WeaTableNew } from "comsMobx";
import { WeaLocaleProvider, WeaReqTop, WeaFormItem, WeaSearchGroup, WeaRightMenu, WeaTab, WeaCascader, WeaBrowser, WeaAlertPage, WeaNewScroll } from 'ecCom';
import { WeaSwitch } from "comsMobx"
import {Condition, CardCondition} from '../list/listCondition';
import {InfoFeedbackDialog} from '../../components/dialog/InfoFeedbackDialog';
import {Text} from '../util/text';
const text = new Text();
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject("infoReportStore")
@observer
class InfoReport extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        const {infoReportStore} = this.props;
        const { id, type, by, pathId } = this.props.location.query;   //得到后台url中传递的参数进行condition初始化   pathId代报时用到 by:list表示列表中点击标题进入，by:assistReport代表代报
        infoReportStore.curids = [];
        if(id) {  
            infoReportStore.curids.push(id);
        }
        infoReportStore.initInfoForm({ ids: infoReportStore.curids.join(","), type, by: by, pathId: pathId });
    }

    componentWillReceiveProps(nextProps) {
        const {infoReportStore} = this.props;
        infoReportStore.curids = [];
        if (this.props.location.key !== nextProps.location.key) {
            infoReportStore.initInfoForm();
        }
    }

    handleChange(data) {
        const {infoReportStore, infoReportStore: {formChange}} = this.props;
        let key = Object.keys(data)[0];
        if (key == "reportType") {
            formChange(data[key].value);
        }
    }

    getTopButtons = () => {
        const {infoReportStore} = this.props;
        let btns = [];
        btns.push(
            infoReportStore.getTopButton()
        )
        return btns;
    }

    changeTab(key) {
        const {infoReportStore} = this.props;
        infoReportStore.changeTab(key);
    }

    render() {
        const { infoReportStore, infoReportStore: { loadingSpin, isRight, feedbackDialogStore, status, infoForm, condition, showTab, selectTabKey, tableStore, reload} } = this.props;
        const rightMenu = infoReportStore.getRightMenu();
        let {loading} = status;
        if (loadingSpin) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@7g8s1o`} size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@pjo6us`}><div>{getLabel(382663, '暂无权限') }</div></WeaAlertPage>
        }
        const tabs1 = [{ key: "basicInfo", title: text.BASICINFO }];
        const tabs2 = [{ key: "basicInfo", title: text.BASICINFO }, { key: "infoFeedback", title: text.FEEDBACKINFO }];
        return (
            <div className='wea-govern-info-card'>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@0pnk7c`}
                    datas={rightMenu} >
                    <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@quptsc`}
                        title={text.REPORTINFO}
                        loading={loading}
                        icon={<i className='icon-coms-government' />}
                        iconBgcolor='#f14a2d'
                        buttons={this.getTopButtons() }
                        showDropIcon={true}
                        dropMenuDatas={rightMenu}
                        tabDatas={showTab == true ? tabs2 : tabs1}
                        selectedKey={selectTabKey}
                        onChange={this.changeTab.bind(this) }
                        >
                        <div className="info-card-req-content">


                            <div className='info-card-req-content-inner'>
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@pvk5he`} height='100%'>
                                    <div className='info-card-req-content-inner-basicInfo'>{selectTabKey == "basicInfo" && <div><CardCondition ecId={`${this && this.props && this.props.ecId || ''}_CardCondition@6xvhbb`} listStore={infoReportStore} form={infoForm} handleChange={this.handleChange.bind(this) } condition={condition}></CardCondition></div>}</div>
                                    <div>{selectTabKey == "infoFeedback" &&
                                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@74y5jl`} comsWeaTableStore={tableStore}
                                            register_table={() => reLoad() }
                                            className="wea-info-table"
                                            needScroll={true}
                                            />
                                    }
                                    </div>
                                    <InfoFeedbackDialog ecId={`${this && this.props && this.props.ecId || ''}_InfoFeedbackDialog@ra2ua9`} store={feedbackDialogStore} type='1'/>
                                </WeaNewScroll>
                            </div>

                        </div>
                    </WeaReqTop>
                </WeaRightMenu>
            </div>
        )
    }

}

export default InfoReport;